<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="../favicon.png" />
    <link rel="stylesheet" href="../js/layui/css/layui.css" />
    <link rel="stylesheet" href="../style/layout5.css" />
    <link rel="stylesheet" href="../style/style.css" />
    <title>css layout</title>
  </head>
  <body>
    <div class="fix-btn-previous">上一个布局</div>
    <div class="fix-btn-change">切换单页面显示</div>
    <div class="layout5 layui-anim layui-anim-scalesmall">
      <div class="header">头部</div>
      <div class="header-bottom">夹层</div>
      <div class="container">
        <div class="left">左侧</div>
        <div class="center">内容</div>
        <div class="right">右侧</div>
      </div>
      <div class="footer">底部</div>
    </div>
    <script>
      // 切换显示方式
      let fixBtnChange = document.querySelector(".fix-btn-change");
      fixBtnChange.onclick = function () {
        location.href = "./singlePage.html";
      };
      let fixBtnPrevious = document.querySelector(".fix-btn-previous");
      fixBtnPrevious.onclick = function () {
        location.href = "./layout4.html";
      };
    </script>
  </body>
</html>
